<template>
  <div>
    <a-menu
        @click="handleClick"
        style="border-top: 1px solid #ebedf0;"
        v-model="current"
        :openKeys.sync="openKeys"
        mode="inline"
    >
      <a-menu-item v-for="menu in leftMenuTree" :key="menu.menuCode" :menu="menu">
        <a-icon :type="menu.icon"/>
        {{menu.menuName}}
      </a-menu-item>
    </a-menu>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {ADMIN_INFO} from '../store/mutation-types'

  export default {
    name: 'LeftMenu',
    data () {
      return {
        current: [],
        adminInfo: {},
        leftMenuTree: [],
        openKeys: ['sub1']
      }
    },
    mounted () {
      this.adminInfo = Vue.ls.get(ADMIN_INFO)
      this.leftMenuTree = this.adminInfo.menuTree[0].children
      this.current = [this.leftMenuTree[0].menuCode]
    },
    watch: {
      '$store.state.adminInfo' () {
        this.adminInfo = this.$store.state.adminInfo
        this.leftMenuTree = this.adminInfo.menuTree[0].children
        this.current = [this.leftMenuTree[0].menuCode]
      }
    },
    methods: {
      handleClick (val, e) {
        console.log('click', val)
        console.log('click', e)
        this.current = [val.key]
        this.$router.push({name: val.key})
      },
      titleClick (e) {
        console.log('titleClick', e)
      }
    }
  }
</script>

<style scoped>

</style>
